<template>
  <div class="FlWaterMeterRecordIndex">
    <button
      class="leftTreetitleButton"
      @click="treeShowOrClose = true"
      v-if="!treeShowOrClose"
    >
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <!-- 树形图 -->
      <!-- <leftTree></leftTree> -->
      <waterMeterLeftTree
        class="waterMeterLeftTree"
        @clickClose="clickClose"
        @areaIf="areaIf"
        @userCodeCan="userCodeCan"
        @waterNoCan="waterNoCan"
        @communityCodeCan="communityCodeCan"
      />
    </div>
    <!-- 右侧内容 -->
    <div
      :class="[{ rightcontant: treeShowOrClose }, { rightcontant2: !treeShowOrClose }]"
    >
      <div style="padding: 0 0">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="FlWaterMeterRecordtabs"
        >
          <el-tab-pane label="用水分析" name="first">
            <waterAnalysisTab
              :userCode="userCode"
              :waterNo="waterNo"
              :communityCode="communityCode"
              :key="userCodeKey"
            ></waterAnalysisTab>
          </el-tab-pane>
          <el-tab-pane label="历史读数" name="second">
            <historyList
              :areaCode="areaCode"
              :waterNo="waterNo"
              :key="areaCodeKey"
            ></historyList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
//引入组件
import historyList from "./compotents/historyList";
import waterMeterLeftTree from "./compotents/waterMeterLeftTree";
import waterAnalysisTab from "./compotents/waterAnalysisTab";
import {
  getTree, //区域树--小区资料全部
} from "@/api/baseManage/flCommunity/index";
import { flWaterMeterInfoSearch } from "@/api/waterAnalysis/flWaterMeterRecord/index";
export default {
  components: {
    historyList,
    waterMeterLeftTree,
    waterAnalysisTab,
  },
  name: "FlWaterMeterRecordIndex",
  data() {
    return {
      firstArea: "",
      userCodeKey: 0,
      activeName: "first",
      treeShowOrClose: true,
      // 左侧搜索条件
      areaCode: "",
      areaCodeKey: 0,
      userCode: "",
      waterNo: "",
      communityCode: "",
    };
  },
  methods: {
    // digui  方法
    getFirstArea(areaArr) {
      this.firstArea = areaArr[0].code;
      if (areaArr[0].children) {
        this.getFirstArea(areaArr[0].children);
      }
    },
    // 获取第一条小区的水表
    async getFirstAreaList() {
      const res = await getTree();
      console.log(res, 357);
      let areaList = res.data;
      let firstArea = areaList[0].code;
      this.firstArea = areaList[0].code;
      this.getFirstArea(areaList);
      console.log(this.firstArea, 852);
      // let firstArea = areaList[0].code
      // if (areaList[0].children) {
      //   let areaListTwo = areaList[0].children
      //   firstArea = areaListTwo[0].code
      //   if (areaListTwo[0].children) {
      //     let areaListThree = areaListTwo[0].children
      //     firstArea = areaListTwo[0].code
      //   }
      // }
      // 调用拿水表数据
      this.getWaterList();
    },
    // 请求拿数据
    async getWaterList() {
      let aCode = this.firstArea;
      let Obj = { communityCode: aCode };
      const res = await flWaterMeterInfoSearch(Obj);
      console.log(res, 3197);
      let resData = res.data[0];
      this.userCode = resData.userCode;
      this.waterNo = resData.waterNo;
      this.communityCode = resData.communityCode;
      // 刷新组件
      this.userCodeKey = this.userCodeKey + 1;
      this.areaCodeKey = this.areaCodeKey + 1;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 左侧小区条件
    areaIf(areaCode) {
      console.log(areaCode);
      // this.areaCodeKey += 1
      // 获取code   进行传递
      this.areaCode = areaCode;
      // 刷新页面
      // this.forData(this.currentPage, this.pagesize, this.suoS);
    },
    waterNoCan(waterNo) {
      this.waterNo = waterNo;
      console.log(this.waterNo, 5555566);
    },
    communityCodeCan(communityCode) {
      this.communityCode = communityCode;
      console.log(this.communityCode, 22222);
    },

    userCodeCan(userCode) {
      this.userCode = userCode;
      console.log(this.userCode, 899999);
    },
    clickClose(res) {
      // console.log(res,999);
      if (res === "点击隐藏") {
        this.treeShowOrClose = false;
      }
    },
  },
  watch: {
    userCode(newValue) {
      console.log(newValue, 63311);
      this.userCodeKey = this.userCodeKey + 1;
    },
  },
  created() {
    this.getFirstAreaList();
  },
};
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.FlWaterMeterRecordIndex {
  display: flex;
  height: calc(100vh - 120px);
  overflow: hidden;
  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 14.2%;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }
  .FlWaterMeterRecordtabs {
    padding: 0px 20px;
  }

  .rightcontant {
    width: 85.8%;
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }
    .right_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .leftButtons {
        // width: 300px;
        display: flex;
        .meterExchangeData {
          // margin-right: 10px;
        }
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        // position: absolute;
        padding-left: 50px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        // right: 0;
        width: 300px;
      }
      // .hunt_sunS_F{
      //   float: right;
      //   margin: 10px;
      // }
    }
    .do {
      display: flex;
    }
    .pagination {
      margin-top: 15px;
    }
  }
  .rightcontant2 {
    width: 97%;
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }
    .right_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      // position: relative;
      .leftButtons {
        // width: 300px;
        display: flex;
        .meterExchangeData {
          margin-right: 10px;
        }
        // margin-left: 10px;
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        // position: absolute;
        // right: 0;
        padding-left: 50px;
        width: 300px;
      }
      .hunt_sunS_F {
        float: right;
        margin: 10px;
      }
    }
    .do {
      display: flex;
    }
    .pagination {
      text-align: left;
      margin-top: 15px;
    }
  }
}
</style>
